<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:s="http://jboss.com/products/seam/taglib"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:data="http://labs.jboss.com/jbossrichfaces/ui/dataTable"
				template="template.xhtml">


	<ui:define name="content">
		<rich:dragIndicator id="indicator" />
		<br />
		<div id="userpanel">
			<h1>Choose your eventes!</h1>
			<p>You can choose events you want to bet from the below ones. Use our drag and drop feature to move in to your temporary betting slip.
			
			<br />
			<br />
			You see.....it's extremely simple!
			<br />
			<br />
			Remember ..... <b>you bet. you win</b>
			</p>
			<a4j:form id="tabeleczka">
				
					<rich:dataTable value="#{eventsView.getEvents()}" var="event"
						id="selectedNode" rows="5">

						<f:facet name="header">
							<rich:columnGroup>
								<rich:column>			
									<h:outputText value="Event" />
								</rich:column>
								<rich:column>
									<h:outputText value="Closing date" />
								</rich:column>
								<rich:column>
									<h:outputText value="1" />
								</rich:column>
								<rich:column>
									<h:outputText value="2" />
								</rich:column>
							</rich:columnGroup>
							
						</f:facet>

						<rich:column>
						<a4j:outputPanel>
							<h:outputText value="#{eventsView.printEvent(event)}" />
						</a4j:outputPanel>
						</rich:column>
						<rich:column>
							<h:outputText value="#{event.closingDate}" />
						</rich:column>
						<rich:column>
							<a4j:outputPanel>
							<rich:dragSupport dragIndicator=":indicator"
                                				dragType="Event" dragValue="#{eventsView.b1(event)}">
                                				<rich:dndParam name="label" value="alibaba" />
                            				</rich:dragSupport>
							<h:outputText value="#{eventsView.getSecondRate(event)}" />
							</a4j:outputPanel>
						</rich:column>
						<rich:column>
							<a4j:outputPanel>
							<rich:dragSupport dragIndicator=":indicator"
                                				dragType="Event" dragValue="#{user}" action="#{eventsView.refreshBet(event)}">
                                				<rich:dndParam name="label" value="alibaba" />
                            				</rich:dragSupport>
							<h:outputText value="#{eventsView.getFirstRate(event)}" />
							</a4j:outputPanel>
						</rich:column>
					</rich:dataTable>
				
			</a4j:form>		
		</div>
</ui:define>

	<ui:define name="navigation">
		<br />
		<div id="userpanel">
			<h1>Groups</h1>
			<p>Browse current available groups</p>
		</div>
			<a4j:form>
				

					<rich:tree reRender="tabeleczka"  ajaxSubmitSelection="true" switchType="client" nodeSelectListener="#{treebean.processSelection}" value="#{treebean.tree}" var="node"  >
						<rich:treeNode   reRender="selectedNode">
					<h:outputText value="#{node}"/>
				</rich:treeNode>
			</rich:tree>           
	
</a4j:form>

		<p></p>
</ui:define>

<ui:define name="extra">
	<br/>
	<div id="userpanel">
		<h1>Your temporary bettin slip:</h1>
	</div>
	<h:form id="form1">
	<a4j:region id="reg1">
	<a4j:outputPanel>
        		<rich:dropSupport acceptedTypes="Event" dropValue="#{mybet}" reRender="tabBets, infoPanel, toolPanel"
                       		 dropListener="#{tempSlip.addBet}"/>
			<rich:dataTable
			onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
            onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
            cellpadding="0" cellspacing="0"
			width="100%" id="tabBets" columnClasses="col" columnsWidth="70%, 15%, 15%"
			value="#{tempSlip.retrieveBets()}" 
			var="bet">

			<f:facet name="header">
				<rich:columnGroup styleClass="center">
					<rich:column colspan="3" styleClass="center" >
						<h:outputText styleClass="center" value="Betting Slip"/>
					</rich:column>
				</rich:columnGroup>
			</f:facet>

			<rich:column>
				<h:outputText value="#{tempSlip.betDescription(bet)}" />  <br/>
				<h:outputText value="typ: #{bet.getWinner().name}" />
			</rich:column>
			<rich:column>
				<h:outputText value="#{tempSlip.getRate(bet)}"/>
			</rich:column>
			<rich:column>
				<a4j:commandButton value="x" action="#{tempSlip.removeBet(bet)}"
					reRender="tabBets, infoPanel, toolPanel"></a4j:commandButton>
			</rich:column>
		</rich:dataTable>
			<!-- empty bettingSlip -->
		<a4j:outputPanel id="infoPanel">
			<rich:dataTable rendered="#{tempSlip.getBets().size() eq 0}"
					cellpadding="0" cellspacing="0" 
					width="100%" id="tabEmptySlips" columnClasses="col"
					value="" var="bet">
					<f:facet name="footer" >
						<rich:column>
							<h:outputText styleClass="info" value="You haven't selected any bets yet." /> <br/>
							<h:outputText styleClass="info" value="Please click on the relevant odds to select!" />
						</rich:column>
					</f:facet>
			</rich:dataTable>
		</a4j:outputPanel>
		<a4j:outputPanel  id="toolPanel" >
			<a4j:outputPanel rendered="#{tempSlip.getBets().size() gt 0}">
			<!--a4j:outputPanel ajaxRendered="true" rendered="#{tempSlip.getBets().size() gt 0}" rendered="#{tempSlip.getBets().size() gt 0}"-->
				<!-- bets number -->
				<rich:dataTable 
					cellpadding="0" cellspacing="0" 
					width="100%" id="tabSize" columnClasses="col" columnsWidth="70%, 30%"
					value="" var="bet">
					<f:facet name="footer">
						<rich:columnGroup>
							<rich:column>
								<h:outputText value="Number of bets:" />
							</rich:column>
							<rich:column colspan="2" styleClass="inputcell">
								<h:outputText styleClass="inputcell"
									value="#{tempSlip.getBets().size()}" />
							</rich:column>
						</rich:columnGroup>
					</f:facet>
				</rich:dataTable>
				<!-- bets total odds -->
				<rich:dataTable 
					cellpadding="0" cellspacing="0" 
					width="100%" id="tabRate" columnClasses="col" columnsWidth="70%, 30%"
					value="" var="bet">
					<f:facet name="footer" >
						<rich:columnGroup>
							<rich:column>
								<h:outputText value="Total odds:" />
							</rich:column>
							<rich:column styleClass="inputcell">
								<h:outputText size="6" styleClass="inputcell"
									value="#{tempSlip.getTotalOdds()}" />
							</rich:column>
						</rich:columnGroup>
					</f:facet>
				</rich:dataTable>
				<!-- bets total stake -->
				<rich:dataTable 
					cellpadding="0" cellspacing="0" 
					width="100%" id="tabStake" columnClasses="col" columnsWidth="70%, 30%"
					value="" var="bet">
					<f:facet name="footer">
						<rich:columnGroup>
							<rich:column>
								<h:outputText value="Stake:" />
							</rich:column>
							<rich:column styleClass="inputcell">
								<a4j:region>
									<h:inputText styleClass="inputcell" 
										value="#{tempSlip.stake}" id="stakeInput" size="10" >
										<a4j:support event="onkeyup" reRender="winningInput, inputcell"/>
									</h:inputText>
								</a4j:region>
							</rich:column>
						</rich:columnGroup>
					</f:facet>
				</rich:dataTable>
				<!-- bets total money -->
				<rich:dataTable 
					cellpadding="0" cellspacing="0" 
					width="100%" id="tabWinning" columnsWidth="70%, 30%"
					value="" var="bet">
					<f:facet name="footer">
						<rich:columnGroup>
							<rich:column>
								<h:outputText value="Winnings:"/>
							</rich:column>
							<rich:column styleClass="inputcell">
								<a4j:region>
									<h:inputText styleClass="inputcell" 
										value="#{tempSlip.winning}"
										id="winningInput" size="10">
										<a4j:support event="onkeyup" reRender="stakeInput" />
									</h:inputText>
								</a4j:region>
							</rich:column>
						</rich:columnGroup>
					</f:facet>
				</rich:dataTable>
				<!-- bets accept -->
				<rich:dataTable align="right" 
					cellpadding="0" cellspacing="0" 
					width="100%" id="carList5" columnClasses="col"
					value="" var="bet" frame="below">
					<f:facet name="footer">
						<rich:column styleClass="right" colspan="2">
							<a4j:commandButton styleClass="right" value="Forward >>"
								action="#{tempSlip.acceptTempSlip()}" reRender="tabBets, infoPanel, toolPanel"></a4j:commandButton>
						</rich:column>
					</f:facet>
				</rich:dataTable>
			</a4j:outputPanel>
		</a4j:outputPanel>
	</a4j:outputPanel>
	</a4j:region>
	</h:form>
</ui:define>

</ui:composition>
